<template>
	<rh-wx class="my-card-exchange-success-container">
		<template>
			<view class="success-content flex-column">
			  <u-icon name="checkmark-circle-fill" color="#22C134" size="120"></u-icon>
			  <text class="success-txt">您的卡券兑换成功</text>
			</view>
			<view class="main-content">
			  <text class="main-label">兑换详情</text>
			  <view class="card-content flex-normal">
					<image class="card-icon" :src="activity.coverUrl" mode=""></image>
			    <view class="card-main flex-column">
			      <text class="card-label">{{activity.activityName}}</text>
			      <text class="card-desc">剩余次数：{{residueCount}}</text>
			      <text class="card-time">截止日期：{{activity.endTime}}</text>
			    </view>
			  </view>
			  <view class="btn-content flex-center">
			    <text class="btn-txt" @click="jumpPage">进入我的卡券查看</text>
			    <u-icon @click="jumpPage" name="arrow-rightward" color="#000000" size="28"></u-icon>
			  </view>
			</view>
		</template>
	</rh-wx>
</template>

<script>
	import {isWechat} from '@/script/wx-premission.js'
	import {getCardDetail} from '@/api/card/index.js'
	export default {
		data() {
			return {
				isWechat: isWechat(),
				activity: {},
				residueCount: '0',
			}
		},
		onLoad(e) {
			if(!this.isWechat) return
			let {id = ''} = e, _self = this
			if(!id || id == '') return
			_self.showWxApp().then(boo => {
				_self.queryCardDetail(id)
			})
		},
		methods: {
			jumpPage(){
				let _self = this
				_self.$$router.push({name: 'myCardList'})
			},
			queryCardDetail(id){
				let _self = this
				getCardDetail(id).then(res => {
					let {activity = {}, residueCount} = res.data
					_self.activity = activity
					_self.residueCount = residueCount
				})
			}
		}

	}
</script>
<style lang="scss" scoped>
  // @include fontStyle(#666, 24rpx);
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.my-card-exchange-success-container{
		background-color: #F4F8F9;
		min-height: 100vh;
    padding: 0 20rpx;
    .success-content{
      padding-top: 100rpx;
      align-items: center;
      .success-txt{
        @include fontStyle(#979797, 24rpx);
        margin-top: 50rpx;
      }
    }
    .main-content{
      margin-top: 80rpx;
      .main-label{
        @include fontStyle(#3D3D3D, 32rpx);
      }
      .card-content{
        margin-top: 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 26rpx 20rpx;
        .card-icon{
          width: 228rpx;
          height: 144rpx;
          overflow: hidden;
          border-radius: 12rpx;
          background-color: #F4F8F9;
        }
        .card-main{
          flex: 1;
          margin-left: 30rpx;
          .card-label{
            @include fontStyle(#3E3E3E, 32rpx);
          }
          .card-desc{
            margin-top: 15rpx;
            @include fontStyle(#000000, 24rpx);
          }
          .card-time{
            margin-top: 15rpx;
            @include fontStyle(#7F7F7F, 24rpx);
          }
        }
      }
      .btn-content{
        margin-top: 90rpx;
        .btn-txt{
          @include fontStyle(#3D3D3D, 28rpx);
          margin-right: 30rpx;
        }
      }
    }
	}

</style>




